<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    wrapClassName="ant-modal-cust-warp"
    destroyOnClose
    :footer="null"
    @cancel="handleCancel"
    class="configSettingModal">
    <div class="configSettingModal">
      <!-- 流程标题 -->
      <div class="steps">
        <div class="title">设备新增</div>
        <div class="stepsWrap">
          <a-steps progress-dot :current="current" direction="vertical">
            <a-step v-for="(step,index) in steps" :key="index" :title="step.title" :deviceInfo="modalValue" @change="stepChange"></a-step>
          </a-steps>
        </div>
      </div>
      <!-- 流程内容 -->
      <div class="settings">
        <div class="title">{{steps[current].title}}</div>
        <component :deviceAliasName='deviceAliasName' :modalValue='modalValue' :is="comName" class="componentWrap" @ok="close" @currentChange="currentChange($event)" @infoChange="infoChange"></component>
        <div class="buttons">

        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import PlaceInfoModal from '@views/passage/device/modules/PlaceInfoModal'
import DeviceInfoModal from '@views/passage/device/modules/DeviceInfoModal'
import {postAction} from '@/api/manage'
export default {
  name:'AddDeviceModal',
  components:{
    PlaceInfoModal,
    DeviceInfoModal
  },
  data(){
    return{
      modalValue:{},
      deviceAliasName:"",
      showSearch:true,
      current: 0,
      modalWidth: 1200,
      visible: false,
      confirmLoading: false,
      formData:{},
      model:{},
      url:{
        deviceAdd:"/device/add",
      },
      steps :[{
        title: '位置信息配置',
        comName: 'PlaceInfoModal'
      },
        {
          title: '设备信息配置',
          comName: 'DeviceInfoModal'
        },
      ],
    }
  },
  methods:{
    open: function (currentIndex = 0) {
      this.modalValue= { }
      this.current = currentIndex;
      this.visible = true;
    },
    edit(record){
      this.current=0;
      this.visible=true;
      this.modalValue=record
      this.infoChange(record)

    },
    infoChange(formData){
      console.log(formData)
      this.deviceAliasName = formData.deviceAliasName
      this.formData = Object.assign(this.formData,formData)
    },
    currentChange: function (current) {
      this.current = current;
    },
    stepChange(){
    },
    close(){
      this.$emit('ok');
      let params = {}
      params.id = this.formData.id
      params.projectId=this.formData.projectId.key
      params.projectName=this.formData.projectId.label
      params.areaId=this.formData.areaId.key
      params.areaName=this.formData.areaId.label
      params.deviceNum = this.formData.deviceNum
      params.deviceCode =this.formData.deviceType.label
      params.regionName = this.formData.deviceAliasName
      params.deviceSn = this.formData.deviceSn
      params.swapAddress = this.formData.swapAddress
      params.swapType = this.formData.swapType
      params.deviceModel = this.formData.deviceModel
      params.deviceAlias = this.formData.deviceAliasName
      params.way = this.formData.way
      if (this.formData.buildId!=null){
        params.buildingId=this.formData.buildId.key
      }
      if (this.formData.unitId!=null){
        params.unitId=this.formData.unitId.key
      }
      if (this.formData.floorId!=null){
        params.floorId=this.formData.floorId.key
      }

      if (this.formData.houseId!=null) {
        params.houseId = this.formData.houseId.key
      }
      postAction(this.url.deviceAdd,params).then(res=>{
        this.confirmLoading = true
        this.visible = false;
        if(res.success){
          this.$message.success(res.message)
          this.visible=false
          this.$emit('ok')
        }else{
          this.$message.warning(res.message)
        }
        this.confirmLoading = false
      })

    },
    handleCancel() {
      this.visible=false
    },
  },
  created() {
  },
  computed: {
    comName: function () {
      return this.steps[this.current].comName;
    }
  }

}
</script>
<style>
.configSettingModal {
  display: flex;
}
.configSettingModal .ant-modal-content{
  background-color: transparent;
}
.configSettingModal .ant-modal-body{
  padding:0;
}

.configSettingModal .steps {
  width: 20%;
  background-color: #fff;
  border-radius: 4px;

}
.configSettingModal .stepsWrap{
  display:flex;
  justify-content: center;
  margin-top:50px;
}
.configSettingModal .title{
  border-bottom:1px solid rgba(216, 216, 216, 1);
  line-height: 60px;
  font-size:16px;
}
.configSettingModal .steps .title{
  text-align: center;
}
.configSettingModal .settings .title{
  text-indent: 20px;
}

.configSettingModal .settings {
  width: 79%;
  border-radius: 4px;
  margin-left:1%;
  background-color:#fff;
}
.configSettingModal .ant-steps-dot .ant-steps-item-content{
  width:auto;
}
.configSettingModal .ant-steps{
  width:auto;
}
.configSettingModal .ant-steps-item-active .ant-steps-item-title{
  color:#1890ff!important;
  font-weight: bold;
}
.configSettingModal .componentWrap{
  padding:20px;
}
</style>